import React, { Component } from 'react';

class Event extends Component {

  constructor() {
    super()
    this.state = {
      name: 'gp18'
    }
    // 推荐
    this.myhandleClick = this.handleClick.bind(this);
  }


  go(event) {
    console.log(event.target)
    event.preventDefault();
  }

  handleInput(event) {
    console.log('input ...')
    this.setState({
      name: event.target.value
    })
  }

  // handleClick(val,event,) {
  //   console.log(event, val)
  // }

  // 组件内使用箭头函数
  // handleClick =()=>{
  //   console.log(this.state.name)
  // }

  handleClick(event, val) {
    console.log(event, val)
  }

  render() {
    return (
      <div>
        <a href="http://www.baidu.com" onClick={this.go} > link </a>
        <hr />
        {this.state.name}
        <input type="text"
          defaultValue={this.state.name}
          onChange={this.handleInput.bind(this)} />

        <hr />

        {/* 参数传递方式一 */}
        {/* <button onClick={this.handleClick.bind(this, 'hello')}>添加</button> */}

        {/* <button onClick={this.handleClick}>添加</button> */}

        {/* 行内箭头函数 */}
        {/* 参数传递方式二 */}
        {/* <button onClick={(event)=>{
         return this.handleClick(event,'abc')
        }}>添加</button> */}

        <button onClick={this.myhandleClick('abc')}>添加</button>


      </div>
    );
  }
}

export default Event;